<template>
	<view class="component">
		<scroll-view scroll-x enable-flex class="scrollView">
			
			<view v-for="(item,index) in tabs" @click="()=>onTabChange(index)" :key="item.type"
				:class="['item', activeIndex === index ? 'active':'']">
				<text>{{item.title}}</text>
			</view>
		</scroll-view>
	</view>
</template>


<script setup>
	const props = defineProps({
		tabs: {
			type: Array
		},
		activeIndex: {
			type: Number,
			default: 0
		}
	});

	// defineEmits 声明子组件可触发的事件类型(事件通信)
	const emit = defineEmits(['tab-change']);

	// 切换 Tabs
	const onTabChange = (index) => {
		emit('tab-change', index); // 传递index参数
	};
</script>


<style lang="scss" scoped>
	@use 'style.scss';
</style>